<%@page import="com.zpyr.common.StringUtil"%>
<%@page import="com.zpyr.mvc.vo.Home_memo"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<%
	Home_memo memoObj = (Home_memo) request.getAttribute("memoObj");
	if(memoObj == null) {
		return;
	}
%>
<html>
<head>
<script type="text/javascript">
	goEditM = function() {
		var v = $('form[name=memo_viewer_content] div[name=m_viewer]');
		var e = $('form[name=memo_viewer_content] div[name=m_editor]');
		
		v.css('display' , 'none');
		e.css('display' , 'block');
		e.find('textarea').focus();
	};
	
	doEditM = function(elem) {
		var changed = $(elem).attr('changed');
		if(changed == 'Y')	 {
			//update
			var url = '/home/memo/update.zpr';
			var params = { 'memo_seq' : '<%=memoObj.getMemo_seq()%>' , 'memo' : $(elem).val() };
			
			$.post(url , params , function(data){
				if(data >= 1) {
					// 성공
				}
				else {
					// 실패
				}
				viewMemo(<%=memoObj.getMemo_seq()%>);
			});
		}
		else {
			var v = $('form[name=memo_viewer_content] div[name=m_viewer]');
			var e = $('form[name=memo_viewer_content] div[name=m_editor]');
			
			v.css('display' , 'block');
			e.css('display' , 'none');
		}
	};

	goEditT = function() {
		var v = $('form[name=title_viewer_content] span[name=t_viewer]');
		var e = $('form[name=title_viewer_content] span[name=t_editor]');
		v.css('display' , 'none');
		e.css('display' , 'inline');
		e.find('input').focus();
	};
	
	doEditT = function(elem) {
		var changed = $(elem).attr('changed');
		if(changed == 'Y')	 {
			//update
			var url = '/home/memo/update.zpr';
			var params = { 'memo_seq' : '<%=memoObj.getMemo_seq()%>' , 'title' : $(elem).val() };
			
			$.post(url , params , function(data){
				if(data >= 1) {
					// 성공
					
					console.log( $('.memo_title_clickable') );
					
					$('.memo_title_clickable[id=memo_title'+ <%=memoObj.getMemo_seq()%> +']').text( $(elem).val() );
				}
				else {
					// 실패
				}
				viewMemo(<%=memoObj.getMemo_seq()%>);
			});
			
		}
		else {
			var v = $('form[name=title_viewer_content] span[name=t_viewer]');
			var e = $('form[name=title_viewer_content] span[name=t_editor]');
			v.css('display' , 'inline');
			e.css('display' , 'none');
		}
	};
	
</script>
</head>
<body>
<table>
<thead>
<tr>
<th name='memo_drag_handler'>
<form name="title_viewer_content" style="display:inline;" onsubmit="doEditT($(this).find(':input').get(0) );return false;">
<span name="t_viewer" ondblclick="goEditT();"><%=memoObj.getTitle() %></span>
<span name="t_editor" style="display:none;">
<input type="text" value="<%=memoObj.getTitle() %>" onkeyup="if( window.event.keyCode != 13 ) $(this).attr('changed' , 'Y');" onblur="doEditT(this);" />
</span>
</form>
<span style="float:right; margin-right:5px; cursor:pointer; font-weight: bold; font-size:14px;" onclick="$('#memo_viewer').css('display','none')">X</span>
</th>
</tr>
<tr>
<th style="height: 180px; text-align: left; padding-left:5px; overflow: auto;">
<form name="memo_viewer_content">
<div name="m_viewer" ondblclick="goEditM();">
<%=StringUtil.textTOhtml( memoObj.getMemo() ) %>
</div>
<div name="m_editor" style="display:none;">
<textarea style="width:99%;" rows="7" onkeyup="$(this).attr('changed' , 'Y')" onblur="doEditM(this);" >
<%=memoObj.getMemo() %>
</textarea>
</div>
</form>
</th>
</tr>
</thead>
</table>
</body>
</html>